<template>
	<view style="display: flex;">
		<view class="up-img" @click="chooseImage">
			<image src="/static/upphoto.jpg" mode=""></image>
		</view>
		<view class="img-list">
			<view v-for="(item, index) in imgList" :key="index" style="position: relative;margin-right: 10rpx;">
				<image :src="item" mode="" style="border-radius: 4rpx;"></image>
				<icon type="clear" size="15" style="position: absolute;right: -2rpx;top: -8rpx;font-size:16rpx;" @click.native="clear(index)"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// imgList: ["http://192.168.3.132:20097/storage/activity/20191120/7e7d3d456422aff0610da9d5e6456078.jpg","http://192.168.3.132:20097/storage/activity/20191120/7e7d3d456422aff0610da9d5e6456078.jpg","http://192.168.3.132:20097/storage/activity/20191120/7e7d3d456422aff0610da9d5e6456078.jpg"],
				imgList: []
			}
		},
		methods: {
			clear(index) {
				console.log(index)
				this.imgList.splice(index,1)
			},
			// 选择图片
			chooseImage() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res) => {
						if (this.imgList.length >= 3) {
							uni.showToast({
					　　　　　　 title: '最多上传3张照片',
					　　　　　　 icon: 'none'
					　　　　 })
							return
						}
				        const images = res.tempFilePaths;
						console.log(res.tempFilePaths)
						this.uploadImage(images)
						
				    }
				})
			},
			uploadImage(images) {
				console.log(images)
				uni.showLoading({
					title:'上传中'
				})
				uni.uploadFile({
					url: "/activity/visitor/uploadimage", //仅为示例，非真实的接口地址
					filePath: images[0],
					name: 'image',
					success: (uploadFileRes) => {
						uploadFileRes = (JSON.parse(uploadFileRes.data));
						console.log(uploadFileRes)
						if(uploadFileRes.code != 0){
							uni.showToast({
					　　　　　　 title: uploadFileRes.message,
					　　　　　　 icon: 'none'
					　　　　 })
							return
						}
						uni.showToast({
				　　　　　　 title: "上传成功",
				　　　　　　 icon: 'none'
				　　　　 })
						this.imgList.push(uploadFileRes.data.filename)
						console.log(this.imgList)
						console.log(this.imgList.length)
						console.log(typeof this.imgList)
						this.$emit('getImgList',this.imgList)
						// uni.setStorage({
						//     key: 'imgs',
						//     data: this.imgList,
						//     success: () => {
						//         console.log('success');
						//     }
						// });
					},
					complete() {
						uni.hideLoading()
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.up-img {
		width: 110rpx;
		height: 110rpx;
		background-color: #f1f2f6;
		border-radius: 4rpx;
		margin-left: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
	.img-list {
		// background-color: #f1f2f6;
		border-radius: 4rpx;
		margin-left: 20rpx;
		display: flex;
		image {
			width: 110rpx;
			height: 110rpx;
			margin-right: 20rpx;
		}
	}
</style>
